<template>
  <div class="ed-field-list">
    <template v-for="(v_, index) in v">
      <ed-field-group-button
        class="ed-field-list-inner-group"
        :key="index"
        :value="v_"
        v-bind="$attrs"
        @change="change(index, $event)"
      >
        <el-button
          icon="el-icon-delete"
          class="ed-field-list-drop"
          @click="drop(index)"
        />
      </ed-field-group-button>
    </template>
    <el-button-group>
      <el-button
        class="ed-field-list-add"
        icon="el-icon-plus"
        @click="add"
      />
      <slot />
    </el-button-group>
  </div>
</template>

<script>
import EdFieldGroupButton from './EdFieldGroupButton'

export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    v: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('change', value)
      }
    }
  },
  components: {
    EdFieldGroupButton
  },
  // render (h) {
  //   const vm = this
  //   let v = (this.value === null) ? [] : [...this.value]
  //
  //   // 对象域数据列表
  //   let children = v.reduce((r, value, index) => {
  //     // 删除按钮
  //     let dropBtn = h('el-button', {
  //       class: {
  //         'ed-field-list-drop': true
  //       },
  //       props: {
  //         icon: 'el-icon-delete'
  //       },
  //       on: {
  //         click () {
  //           vm.$confirm('是否确定删除此项?', '提示', {
  //             confirmButtonText: '确定',
  //             cancelButtonText: '取消',
  //             type: 'warning'
  //           }).then(() => {
  //             v.splice(index, 1)
  //             // console.log('drop index= ', index, ' v= ', v)
  //             vm.$emit('change', v)
  //           }).catch(() => {
  //           })
  //         }
  //       }
  //     })
  //     // 域组按钮
  //     let fieldButton = h('ed-field-group-button', {
  //       props: {
  //         ...vm.$attrs,
  //         fields: vm.fields,
  //         value
  //       },
  //       on: {
  //         change (v_) {
  //           v.splice(index, 1, v_)
  //           vm.$emit('change', v)
  //         }
  //       },
  //       scopedSlots: {
  //         default: () => dropBtn
  //       }
  //     })
  //
  //     r.push(fieldButton)
  //     return r
  //   }, [])
  //
  //   // 新增按钮
  //   let addBtn = h('el-button', {
  //     class: {
  //       'ed-field-list-add': true
  //     },
  //     props: {
  //       icon: 'el-icon-plus'
  //     },
  //     on: {
  //       click () {
  //         v.push({})
  //         vm.$emit('change', v)
  //       }
  //     }
  //   })
  //   children.push(h('el-button-group', {}, [addBtn]))
  //
  //   return h('div', {
  //     class: {
  //       'ed-field-list': true
  //     }
  //   }, children)
  // },
  methods: {
    change (index, value) {
      this.v.splice(index, 1, value)
    },
    add () {
      this.v.push({})
    },
    drop (index) {
      this.$confirm('是否确定删除此项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.v.splice(index, 1)
      }).catch(() => {
      })
    }
  }
}

</script>
<style scoped>
.ed-field-list {
  /**/
}
.ed-field-list-inner-group {
  margin-right: 20px;
}
</style>
